<template>
	<view class="RegLayout">
		<view class="top">
			<view class="topLogo">小饮与食</view>
			<view class="topLogo2">小饮与食</view>
			<view class="slogan">欢迎您的加入</view>
		</view>
		<!-- 法人信息 -->
		<view class="box name">
			<view class="title">法人姓名</view>
			<input type="text" class="input nameInput" v-model="name" />
		</view>
		<view class="box tele">
			<view class="title">法人电话</view>
			<input type="tel" class="input teleInput" v-model="tele" maxlength="11"/>
		</view>
		<view class="box id">
			<view class="title">法人身份证</view>
			<input type="idcard" class="input idInput" v-model="id" maxlength="18"/>
		</view>
		<view class="box address">
			<view class="title">法人现居住地</view>
			<input type="text" class="input addressInput" v-model="address" />
		</view>

		<!-- 店铺信息 -->
		<view class="box storeName">
			<view class="title">店铺名称</view>
			<input type="text" class="input storeNameInput" v-model="storeName" />
		</view>
		<view class="box storeAddress">
			<view class="title">店铺地址</view>
			<input type="text" class="input storeAddressInput" v-model="storeAddress" />
		</view>
		<view class="box storeId">
			<view class="title">统一社会信用代码</view>
			<input type="text" class="input storeIdInput" v-model="storeId" maxlength="18"/>
		</view>
		<view class="box ">
			<view class="title">上传营业执照</view>
			<uni-section  class="section" title="选择任意文件" type="line"  style="margin-left: 50rpx">
				<view class="example-body" >
					<uni-file-picker limit="1" file-mediatype="all"></uni-file-picker>
				</view>
			</uni-section>
		</view>

		<button class="btn"  plain="true" @click="pushRegForm">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				tele: "",
				id: "",
				address: "",
				storeName: "",
				storeAddress: "",
				storeId: "",
				errorMessage: '' //存储错误信息
			}
		},
		methods: {
			setNull(){
				this.name= "",
				this.tele= "",
				this.id="",
				this.address="",
				this.storeName="",
				this.storeAddress="",
				this.storeId=""
			},
			pushRegForm() {
				console.log()
				// 重置错误信息  
				this.errorMessage = 'this.name';

				// 检查所有必填字段  
				if (!this.name || !this.tele || !this.id || !this.address || !this.storeName || !this.storeAddress || !this
					.storeId) {
					this.errorMessage = '所有字段均为必填项，请完整填写后再提交。';
					uni.showToast({
						icon: "none",
						title: "请完整填写后再提交!"
					})
					this.setNull();
					return;
				} else if (!/^[\u4e00-\u9fa5]{2,3}$/.test(this.name)) {  
					this.errorMessage = '名字必须为中文且长度为2到3个字。';  
					uni.showToast({  
						icon: 'none',  
						title: '名字格式错误!'  ,
					});
					this.setNull();
					return;  
				} else if (!(/^\d+$/.test(this.tele))) {
					this.errorMessage = '电话号码格式不正确，应为11位数字。';
					uni.showToast({
						icon: 'none',
						title: '电话号码格式错误!'
					});
					this.setNull()
					return;
				}else if ( !(/^[a-zA-Z0-9]+$/).test(this.id)) {
					this.errorMessage = '身份证号码格式不正确，应为18位数字或字母。';
					uni.showToast({
						icon: 'none',
						title: '身份证号码格式错误!'
					});
					this.setNull()
					return;
				} else if ( !(/^[a-zA-Z0-9]+$/).test(this.storeId)) {
					uni.showToast({
						icon: 'none',
						title: '统一社会信用代码格式错误!'
					});
					this.setNull()
					return;
				}else {
					//发送请求
					uni.reLaunch({
						url:"/pages/oterPages/login/login"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.RegLayout{
	// display: flex;
	// flex-direction:column;
	// justify-content: center;
	// align-items: center;
	padding-left: 30rpx;
	margin-right: 80rpx;
	.top{
		width:100vw;
		height:330rpx;
		position: relative;
		.topLogo,.topLogo2{
				font-size: 130rpx;
				font-weight: 900;
				font-family: "隶书";
			}
			.topLogo{
				padding-top:65rpx;
				margin-left:65rpx;
				color:#e6e6e6;
			}
			.topLogo2{
				margin-top:-120rpx;
				margin-left:100rpx;
				color: #343434;
			}
			.slogan{
				position: absolute;
				right: 50rpx;
				bottom: 30rpx;
				font-size: 37rpx;
				font-family: "楷体";
			}
	}
	.box {
		border-bottom: 1px solid grey;
		height: fit-content;
		display: flex;
		flex-direction:row;
		margin-top: 30rpx;
		.title{
			height: 100%;
			line-height: 70rpx;
			font-weight: 600;
			color: #8c8c8c;
			
		}
		
		.input {
			height: 73rpx;
			margin-left:20rpx ;
		}
		// uni-button::after{
		// 	margin-left: 50rpx;
		// 	// background-color: #5e3719;
			
		// }
		
		
	}
	.btn{
		margin: auto;
		margin-top: 50rpx;
		width: 30%;
		font-size: 35rpx;
		box-shadow: 5rpx 5rpx 5rpx #8c8c8c;
	}
	
}
	
</style>